<template>

  <!--最外面一层添加背景图片框架-->  
  <div id="building">
    
      
  <!--注册卡片-->   
  <el-card class="login-card">

    <!--标题文字-->
    <h1 class="login-title" style="margin-bottom: 40px;">XSAP系统注册</h1>
    <!--标题文字##-->

    <!--数据表单区域-->
    <div class="login-form">
      <el-form ref="registerFormRef" :model="registerForm" :rules="rules">

        <!--添加注册表单组件区域-->
        <el-form-item label="用户名:" label-width="70px"  prop="name">
            <el-input v-model="registerForm.name" placeholder="请输入用户名" prefix-icon="name" maxlength="10" show-word-limit></el-input>
          </el-form-item>

          <el-form-item label="号码:" label-width="70px"  prop="phone">
            <el-input v-model="registerForm.phone" placeholder="请输入手机号" prefix-icon="phone" maxlength="11"></el-input>
          </el-form-item>

          <el-form-item label="密码:" label-width="70px" prop="rolePassword">
            <el-input type="password" v-model="registerForm.rolePassword" placeholder="请输入密码" prefix-icon="lock" show-password></el-input>
          </el-form-item>

          <el-form-item  label="性别:" label-width="70px" prop="sex">
            <el-radio-group v-model="registerForm.sex">
              <el-radio value="男">男</el-radio>
              <el-radio value="女">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item style="margin-left: 120px;">
            <el-button type="primary" @click="handleRegister">注册</el-button>
            
            <el-button @click="handleReset()">清空</el-button>
          </el-form-item>

        <!--添加注册表单组件区域##-->
      
      </el-form>


    </div>
    <!--数据表单区域##-->

    <!-- 无帐号，点此注册 -->
    <el-row style="text-align: right;">
      <el-col>
        <el-text class="w-150px mb-2">
          若已有帐号，点此>> <RouterLink to="/register" style="font-size: 1.2em;" @click="toLogin">登录</RouterLink>
        </el-text>
      </el-col>
    </el-row>
    <!--无帐号，点此注册##-->
      
  </el-card>
  <!--注册卡片##--> 
  
  <!-Footer区域-->
  <el-footer height="100" style="color:antiquewhite;margin-top: 50px;">
    苏州大学版权所有 &copy;2020-2024
  </el-footer>
  <!-Footer区域##-->

</div>
<!--最外面一层，背景界面设置##-->       
</template>

<script  setup>
import { ref,reactive } from 'vue';
import { RouterLink } from 'vue-router'
import {useRouter} from 'vue-router'
import {register} from '@/api/register.js'; 


//创建router
const router  = useRouter()



  
//获取注册表单对象
const registerFormRef = ref(null);
//
const registerForm = reactive({
  name:'',
  phone: '',
  rolePassword: '',
  sex:'男', // 默认性别为男
});

const rules = ref({
  name:[
    { required: true, message: '用户名是必填项', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '手机号是必填项', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
  ],
  rolePassword: [
    { required: true, message: '密码是必填项', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ],
  sex: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ]
});


function toLogin() {
    //跳转到路由的RegisterView.vue去
    handleReset();
    router.push("/login")
  }

function handleRegister() {

  console.log("进入表单检测")
  // 表单验证
  registerFormRef.value.validate((valid) => {
    console.log('表单验证结果:', valid);
    if (valid) {
      console.log('注册信息:', registerForm);

      register(registerForm).then(res=>{
        console.log(res)
        if(res.data.code==200){
          alert("注册成功,返回登录页面重新登录即可")
          router.push("/login")

        }else{
          alert("注册请求失败,重新注册")
          handleReset();
        }
      }).catch(err => {
      // error
      console.log(err)
      })
    } else {
      console.error('表单验证失败');
      return false;
    }
  });
}


//重置表单
const handleReset = () => {
  console.log('重置表单')
  registerFormRef.value.resetFields()
}


</script>

<style scoped>

/*注册卡片*/
.login-card {
    margin: 0;
    width: 420px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.6); /* 白色背景，80%透明度 */}
/*注册卡片##*/


  /* 标题 */
  .login-title {
    text-align: center;
    margin-bottom: 20px;
    color: #409eff;}
  /* 标题## */


  /* 表单 */
  .login-form {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.0); /* 白色背景，80%透明度 */}
  /* 表单## */



/* 背景图片框架 */
#building{
     /* 移除默认的外边距和内边距 */
    margin: 0;
    padding: 0;
    background:url("../assets/img/7.webp")center center no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh; /* 至少填充整个视口高度 */
    /* 使内容居中 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;}
/* 背景图片框架## */


</style>